<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/navright.css">
    <link rel="stylesheet" href="./css/iconfonts.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/recruit.css">
    <link rel="stylesheet" href="./commpont/layui/css/layui.css">
    <link rel="stylesheet" href="./css/foot.css">
    <title>猿聘</title>
</head>

<body>
    <div class="recruitheader">
        <div class="navtop ">
            <div class="nav mg">
                <ul class="leftnavtop ">
                    <li><a href="../index.html">慕课网首页</a></li>
                    <li><a href="./free.html">免费课程</a></li>
                    <li><a href="./free.html">实战课程</a></li>
                    <li><a href="./job.html">就业班</a></li>
                    <li><a href="#">猿问</a></li>
                    <li><a href="./node.html">手记</a></li>
                    <li><a href="./recruit.html" class="only">猿聘</a></li>
                </ul>
                <ul class="rightnavtop ">
                    <li>
                        <a href="./download.html">下载App
                            <div class="download">
                                <div class="topdown">
                                    <div class="first">
                                        <p>慕课网浏览器-pc客户端</p>
                                        <p class="radius"><i class="icon iconfont icon-windows"></i> Windows版</p>
                                        <p>Mac版开发中，敬请期待...</p>
                                    </div>
                                </div>
                                <div class="botdown">
                                    <p>慕课网App-随时随地学编程</p>
                                    <div class="appdown clearfix">
                                        <div class="appcode fl">
                                            <img src="./img/free/code.png" alt="">
                                        </div>
                                        <div class="appurl fr">
                                            <p class="radiu"><i class="icon iconfont icon-ios"></i> App Store下载</p>
                                            <p class="radiu"><i class="icon iconfont icon-anzhuo"></i> Android下载</p>
                                            <p>扫描下载慕课网APP</p>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="gouwuche icon iconfont icon-gouwucheman"></i>
                            购物车
                            <div class="addcar">
                                <div class="mycar">
                                    <span>我的购物车</span>
                                    <span>已加入0门课程</span>
                                </div>
                                <hr>
                                <div class="concar">
                                    <p class="icon iconfont icon-gouwucheman"></p>
                                    <p>购物车里空空如业</p>
                                    <p>快去这里选购物你中意的课程</p>
                                    <p class="red">实战课程</p>
                                    <p class="red">就业班</p>
                                </div>
                                <hr>
                                <div class="footcar">
                                    <span>我的订单中心</span>
                                    <span>去购物车</span>
                                </div>
                            </div>
                        </a>

                    </li>
                    <li><a href="#">登录</a>/<a href="#">注册</a></li>
                </ul>

            </div>

        </div>
        <div class="navmiddle">
            <img src="./img/recruit/logo.png" alt="">
            <p>
                <span>首页</span>
                <span>职位</span>
                <span>公司</span>
                <span>企业版</span>
            </p>
        </div>
        <div class="navbot">
            <div class="search">
                <select>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广东">广东</option>
                    <option value="江西">江西</option>
                </select>
                <span>|</span>
                <a href="#">
                    <input type="text" placeholder="例如JVAV工程师">
                </a>
                <button>搜索</button>
            </div>
            <div class="hotjob">
                <p>热门职位：</p>
                <ul class="hotjoblist">
                    <li>java</li>
                    <li>php</li>
                    <li>前端</li>
                    <li>iOS</li>
                    <li>运维</li>
                    <li>测试</li>
                </ul>
            </div>
        </div>
    </div>
    <!--招聘内容-->
    <div class="recruitCon clearfix">   
        <div class="recruitcon">
            <div class="leftcon fl">
                <div class="zhaopin">
                    <img src="./img/recruit/zhaopin.jpg" alt="">
                </div>
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">推荐</li>
                        <li>最新</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <ul class="joblist">
                                <li class="clearfix" v-for="(item,index) in recommend" :key="index">
                                    <div class="synopsis fl">
                                        <div class="occupation">
                                            <span>{{item.job}}</span>
                                            <time>{{item.date}}</time>
                                        </div>
                                        <p>
                                            <span>{{item.wages}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.experience}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.education}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.place}}</span>
                                        </p>
                                        <p>{{item.skill}}</p>
                                    </div>
                                    <div class="brief fr">
                                        <div class="charitable">
                                            <p class="fr">
                                                <span>{{item.companyName}}</span>
                                                <img :src="item.pic" alt="">
                                            </p>
                                        </div>
                                        <p>
                                            <span>{{item.aspect}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.people}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.isList}}</span>
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="layui-tab-item">
                            <ul class="joblist">
                                <li class="clearfix" v-for="(item,index) in newJob" :key="index">
                                    <div class="synopsis fl">
                                        <div class="occupation">
                                            <span>{{item.job}}</span>
                                            <time>{{item.date}}</time>
                                        </div>

                                        <p>
                                            <span>{{item.wages}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.experience}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.education}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.place}}</span>
                                        </p>
                                        <p>{{item.skill}}</p>
                                    </div>
                                    <div class="brief fr">
                                        <div class="charitable">
                                            <p class="fr">
                                                <span>{{item.companyName}}</span>
                                                <img :src="item.pic" alt="">
                                            </p>
                                        </div>
                                        <p>
                                            <span>{{item.aspect}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.people}}</span>
                                            <i class="icon iconfont icon-dian"></i>
                                            <span>{{item.isList}}</span>
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
            <div class="rightcon fr">
                <div class="free">
                    <h3>免费发布职位</h3>
                    <p>轻/松/完/成/技/术/人/才/招/聘</p>
                    <p>马上发布职位</p>
                </div>
                <div class="meet">
                    <p>遇到了问题？</p>
                    <p>加入官方招聘群，每日定期推荐优质职位以及求职经验干货，与更多求职者交流学习</p>
                    <p>群号：426175884</p>
                </div>
                <div class="Recommend">
                    <dl>
                        <dt>推荐公司</dt>
                        <dd>
                            <img src="./img/recruit/1.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/2.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/3.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/4.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/5.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/6.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/7.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/8.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/9.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/10.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/11.jpg" alt="">
                        </dd>
                        <dd>
                            <img src="./img/recruit/12.jpg" alt="">
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="right-nav">
                <ul>
                    <li><i class="iconfont icon-fankui"></i><span>意见反馈</span></li>
                    <li><i class="iconfont icon-bangzhu"></i><span>帮助中心</span></li>
                    <li><i class="iconfont icon-diedaisanicon45"></i><span>app下载</span>
                        <div class="qcrapp"></div>
                    </li>
                    <li><i class="iconfont icon-Wchat"></i><span>官方微信</span>
                        <div class="qcrw"></div>
                    </li>
                    <li id="goTop" @click="backTop" :class="{'backShow':isShow}"><i class="iconfont icon-icon"></i><span>返回顶部</span></li>
                </ul>
            </div>
    </div>
    <!--底部-->
    <div class="footer">
        <div class="foots">
            <div class="foot">
                <ul class="footlist">
                    <li>网站首页</li>
                    <li>网站首页</li>
                    <li>企业合作</li>
                    <li>人才招聘</li>
                    <li>联系我们</li>
                    <li>讲师招募</li>
                    <li>常见问题</li>
                    <li>意见反馈</li>
                    <li>慕课大学</li>
                    <li>友情链接</li>
                </ul>
                <p>Copyright © 2018 imooc.com All Rights Reserved | 京ICP备 12003892号-11</p>
            </div>
            <div class="footpic">
                <span></span>
                <p class="mkwcode"></p>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>


    <script src="./js/recruit.js"></script>
    <script src="./commpont/layui/layui.js"></script>
    <script src="./js/recTab.js"></script>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({  
            el: ".recruitCon",
            data() {
                return {
                    recommend: [],
                    newJob: [],
                    clientH: 0,
                    isShow: false
                }
            },
            created() {
                console.log(recommend);
                this.recommend = recommend;
                this.newJob = newJob;
            },
            methods: {
                handleScrool() {
                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                    if (scrollTop > this.clientH) {
                        this.isShow = true;
                    } else {
                        this.isShow = false;
                    }
                },
                backTop() {
                    let timer = '';
                    clearInterval(timer)
                    timer = setInterval(() => {
                        document.body.scrollTop -= 100;
                        if (document.body.scrollTop == 0) {
                            clearInterval(timer)
                        }

                    }, 10);
                }
            },
            mounted() {
                this.clientH = document.body.clientHeight;
                window.addEventListener('scroll', this.handleScrool);
            },
            destroyed() {
                window.removeEventListener('scroll', this.handleScrool)
            },

        })
    </script>
</body>

</html>